<template>
    <div class="app-container">
        <div class="app-nav">
            <div class="flex flexa">
                <div class="titles">我的账户</div>
                <div class="account-set" @click="openShoukuanzhanghu" v-if="checkPermi(['shd:home:shezhizhanghu'])">
                    <img src="@/assets/img/account/account-setting.png" alt="">
                    收款账户设置
                </div>
            </div>
            <div class="flex cards" style="flex-wrap: wrap;">
                <div class="flex-item">
                    <div class="flex flexa">
                    <img class="account-img" src="@/assets/img/account/account-1.png" alt="">
                    <span>虞豆</span>
                    <img @click="chongzhijifen" v-hasPermi="['shd:home:yudouchongzhi']" class="btn-img" src="@/assets/img/account/account-cz.png" alt="">
                    </div>
                    <div v-if="checkPermi(['shd:home:xianshiyudou'])" class="nums"> {{ shopInfo.campNumber||'0' }}</div>
                    <div style="font-size: 18px;" v-else>****</div>
                </div>

                 <div class="flex-item flex-item2">
                    <div class="flex flexa">
                    <img class="account-img" src="@/assets/img/account/account-2.png" alt="">
                    <span>系统短信</span>
                    <img @click="smsChongzhiOpen" v-hasPermi="['shd:home:yudouchongzhi']" class="btn-img" src="@/assets/img/account/account-cz.png" alt="">
                    </div>
                    <div v-if="checkPermi(['shd:home:xianshiyudou'])" class="nums">
                      <span style="font-size: 13px;color: #999;">免费短信:</span>{{ shopInfo.smsSystemNum }}
                  <span style="margin-left: 10px;font-size: 13px;color: #999;">短信包:</span>{{ shopInfo.smsPackageNum }}
                    </div>
                      <div style="font-size: 18px;" v-else>
                  ****
                </div>
                </div>

                 <div class="flex-item flex-item3">
                    <div class="flex flexa">
                    <img class="account-img" src="@/assets/img/account/account-3.png" alt="">
                    <span>余额</span>
                    <img @click="chongzhiyue" v-hasPermi="['shd:home:yudouchongzhi']" class="btn-img" src="@/assets/img/account/account-cz.png" alt="">
                     <img style="margin-left: 8px;" @click="tixianFn" v-hasPermi="['shd:home:tixian']" class="btn-img" src="@/assets/img/account/account-tixian.png" alt="">
                    </div>
                    <div v-if="checkPermi(['shd:home:xianshiyue'])" class="nums">{{ shopInfo.availableMoney||'--' }}</div>
             <div style="font-size: 18px;" v-else>
                    ****
                  </div>
                   <div v-if="TIXIANING&&TIXIANING.type==1" style="color: #6C5DD3;font-size:12px;">您有一笔 <span style="color:red;font-size:18px">{{TIXIANING.applicantAmount}}</span> 元的提现正在进行中...</div>
                </div>
                 <div class="flex-item flex-item4">
                    <div class="flex flexa">
                    <img class="account-img" src="@/assets/img/account/account-4.png" alt="">
                    <span>保证金</span>
                    <img v-hasPermi="['shd:home:tixian']" @click="openTixian" :class="shopInfo.marginState!=2||shopInfo.marginMoney<=0?'disableds':''" :disabled="shopInfo.marginState!=2||shopInfo.marginMoney<=0" style="margin-right:8px;" class="btn-img" src="@/assets/img/account/account-tixian.png" alt="">
                    <img style="width: 92px;" @click="openPayBZJ" v-if="shopInfo.marginState!=2&&!(TIXIANING&&TIXIANING.type==2)" class="btn-img" src="@/assets/img/account/account-bzj.png" alt="">
                    <img style="width: 92px;" @click="openPayBZJ" v-if="shopInfo.marginState==2&&shopInfo.marginMoney<BZJmoney" class="btn-img" src="@/assets/img/account/account-bzj.png" alt="">
                </div>
                    <div class="nums"> {{ shopInfo.marginMoney||'0.00' }}</div>
                    <div v-if="TIXIANING&&TIXIANING.type==2" style="color: #6C5DD3;font-size:12px;">您有一笔 <span style="color:red;font-size:18px">{{TIXIANING.applicantAmount}}</span> 元的提现正在进行中...</div>
                </div>
            </div>
        </div>
        <div class="app-nav appb-bg">
        <div class="flex mingxi">
            <div class="titles">账户明细</div>
        </div>
        <div class="customTab">
            <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabChange" v-loading="loading">
                <el-tab-pane v-for="tab in tabList" :key="tab.value" :label="tab.name" :name="tab.value">
                     <template v-if="tab.value === '1'">
                        <yudou v-if="checkPermi(['tenantPages/jifen'])"></yudou>
                        <el-empty v-else :image-size="100" description="您还没有该模块权限,请联系管理员分配权限!"></el-empty>
                     </template>
                     <template v-if="tab.value === '2'">
                        <yue v-if="checkPermi(['tenantPages:moneys'])"></yue>
                          <el-empty v-else :image-size="100" description="您还没有该模块权限,请联系管理员分配权限!"></el-empty>
                     </template>
                       <template v-if="tab.value === '3'">
                        <tixian v-if="checkPermi(['tenantPages:moneys'])" ></tixian>
                        <el-empty v-else :image-size="100" description="您还没有该模块权限,请联系管理员分配权限!"></el-empty>
                     </template>
                     <template v-if="tab.value === '4'">
                        <sms v-if="checkPermi(['tenantPages/jifen'])"></sms>
                        <el-empty v-else :image-size="100" description="您还没有该模块权限,请联系管理员分配权限!"></el-empty>
                     </template>
                      <template v-if="tab.value === '5'">
                        <baozheng></baozheng>
                     </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        </div>
        <addBankcardDialog ref="addBankcardDialog" @openAuthDialog="openAuth"></addBankcardDialog>
        <authDialog ref="authDialog"></authDialog>
        <chongzhi ref="chongzhi"></chongzhi>
        <smsChongzhi ref="smsChongzhi"></smsChongzhi>

            <!-- 充值余额 -->
    <chongzhiYue ref="chongzhiYue"></chongzhiYue>
     <Acctixian ref="tixian"></Acctixian>
     <payBZJ ref="payBZJ"></payBZJ>
     <huifuTixianMx ref="huifuTixianMx"></huifuTixianMx>
    </div>
</template>
<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
import subtit from "@/components/indexComponents/subtit.vue";
import yudou from "./accComponents/yudou.vue";
import yue from "./accComponents/yue.vue";
import tixian from "./accComponents/tixian.vue";
import sms from "./accComponents/sms.vue";
import baozheng from "./accComponents/baozheng.vue";

import addBankcardDialog from "@/views/tenantPages/shopManage/shopCenter/addBankcardDialog.vue";
import authDialog from "@/views/tenantPages/shopManage/shopCenter/authDialog";
import chongzhi from "@/views/tenantPages/moneys/components/chongzhijifen.vue";
import smsChongzhi from "@/views/tenantPages/moneys/components/smsChongzhi.vue";
import chongzhiYue from "@/views/tenantPages/moneys/components/chongzhiYue.vue";
import payBZJ from "@/views/tenantPages/moneys/components/payBZJ.vue";
import Acctixian from "@/views/tenantPages/moneys/components/tixian.vue";
import huifuTixianMx from "@/views/tenantPages/moneys/components/huifuTixianMx.vue";
export default {
    components: { subtit  , yudou,payBZJ , yue , tixian ,Acctixian, sms , baozheng, addBankcardDialog , authDialog , chongzhi , smsChongzhi , huifuTixianMx,chongzhiYue},
    data() {
        return {
            loading: false,
            activeTab: "1",
            // tab配置
            tabList: [
                { name: '虞豆明细', value: '1', },
                { name: '余额明细', value: '2', },
                 { name: '提现明细', value: '3', },
                { name: '短信明细', value: '4', },
                { name: '保证金明细', value: '5', },
            ],
             BZJmoney: "",
              TIXIANING: "",
        };
    },
    watch:{
         userInfo: {
      handler(val) {
        if (val.tenantId != 1) {
            this.getBZJ();
             this.getTixianing();
        }
      }
    }
    },
      computed: {
          userInfo() {
      return this.$store.getters.userInfo;
    },
         shopInfo() {
      return this.$store.getters.shopInfo;
    },
      },
      created() { 
         this.getBZJ();
             this.getTixianing();
    },
    methods: {
        // Tab切换处理
        handleTabChange(tab) {
            this.activeTab = tab.name;
        },
           // 打开收款账户
    openShoukuanzhanghu() {
      this.$refs.addBankcardDialog.open();
    },
       // 打开认证弹窗
    openAuth() {
      this.$refs.authDialog.open();
    },
     // 点击充值
    chongzhijifen() {
      this.$refs.chongzhi.open();
      // this.$refs.paySuccess.open();
    },
      smsChongzhiOpen() {
      this.$refs.smsChongzhi.open();
    },
        chongzhiyue() {
      this.$refs.chongzhiYue.open();
      // this.$refs.paySuccess.open();
    },
     // 点击提现按钮
    tixianFn() {
      if (
        this.shopInfo.marginState == 2 &&
        this.shopInfo.marginMoney < this.BZJmoney
      ) {
        this.$message.error("保证金不足，请缴纳保证金后再提现！");
        return;
      }
      this.$refs.tixian.open(null);
    },
       // 获取保证金金额
    getBZJ() {
      this.getDicts("marginMoney").then((res) => {
        //console.log("%c Line:271 🥕 res", "color:#42b983", res);
        if (res.data && res.data.length) {
          this.BZJmoney = res.data[0].dictValue;
          this.BZJdes = res.data[0].remark
            ? res.data[0].remark.replace(/\n/g, "<br/>")
            : "";
        }
      });
    },
     // 查询是否有正在提现的记录
    getTixianing() {
      myMoneyApi
        .withdrawalRecordList({ pageNum: 1, pageSize: 3, state: 1 })
        .then((res) => {
          if (res && res.rows.length && res.rows[0].state == 1) {
            this.TIXIANING = res.rows[0];
          } else {
            this.TIXIANING = "";
          }
        });
    },
       openPayBZJ() {
      const money =
        Math.round((this.BZJmoney - this.shopInfo.marginMoney) * 100) / 100;
      this.$refs.payBZJ.open(money, this.BZJmoney || 0);
    },
  

      openTixian() {
        if(this.shopInfo.marginState!=2|| this.shopInfo.marginMoney<=0) {
            return
        }
        this.$store.dispatch("getShopInfo");
        this.$refs.tixian.open(null, "bzj");
    },
    },
   
};
</script>
<style lang="scss" scoped>
.app-container {
    padding: 0;
    background: #f3f3f3;
    border-radius: 10px;
}
.app-nav {
    padding: 16px;
    background-color: #fff;
}
.appb-bg {
    border-radius: 10px;
    margin-top: 10px;
}

.mingxi {
    margin-bottom: 16px;
}
.flex {
    display: flex;
}
.flexa {
    align-items: center;
}
.titles {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}
.account-set {
    margin-left: 8px;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    background: #6C5DD3;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    img {
        width: 13px;
        vertical-align: middle;
    }
}

.flex-item {
    margin-top: 16px;
    margin-right: 14px;
    padding: 30px 24px 36px;
    width: 325px;
    height: 140px;
    border-radius: 10px;
    background: url("../../../assets/img/account/1.png") no-repeat center;
    background-size: 100% 100%;
    .account-img {
        width: 16px;
    }
    font-size: 16px;
    color: #333333;
    span {
        margin-left: 4px;
        margin-right: 11px;
    }
    .btn-img {
        width: 58px;
        cursor: pointer;
    }
    .nums {
        margin-top: 19px;
        font-size: 22px;
        color: #333333;
        font-weight: 600;
     
    }
}

.cards {
    gap: 16px;
    flex-wrap: nowrap; /* 强制不换行 */
}

.flex-item {
    min-width: 0; /* 允许flex项目缩小 */
    flex-shrink: 1; /* 允许收缩 */
    flex-basis: 22%; /* 每个项目占25%宽度 */
}

/* 优化小屏幕显示 - 保持单行四个，逐步缩小内容 */
@media (max-width: 1400px) {
    .cards {
        gap: 14px;
    }
    .flex-item {
        padding: 28px 20px 32px;
        height: 134px;
        font-size: 15px;
    }
    .flex-item .account-img { width: 15px; }
    .flex-item .btn-img { width: 54px; }
    .flex-item .nums { font-size: 20px; margin-top: 16px; }
}

@media (max-width: 1200px) {
    .cards {
        gap: 12px;
    }
    .flex-item {
        padding: 24px 16px 28px;
        height: 128px;
        font-size: 14px;
    }
    .flex-item span {
        margin-left: 3px;
        margin-right: 6px;
    }
    .flex-item .account-img { width: 14px; }
    .flex-item .btn-img { width: 50px; }
    .flex-item .nums { font-size: 18px; margin-top: 14px; }
}

@media (max-width: 1000px) {
    .cards {
        gap: 10px;
    }
    .flex-item {
        padding: 20px 12px 24px;
        height: 120px;
        font-size: 13px;
    }
    .flex-item span {
        margin-left: 2px;
        margin-right: 4px;
    }
    .flex-item .account-img { width: 13px; }
    .flex-item .btn-img { width: 46px; }
    .flex-item .nums { font-size: 16px; margin-top: 12px; }
}

@media (max-width: 850px) {
    .cards {
        gap: 8px;
    }
    .flex-item {
        padding: 18px 10px 22px;
        height: 114px;
        font-size: 12px;
    }
    .flex-item span {
        margin-left: 2px;
        margin-right: 3px;
    }
    .flex-item .account-img { width: 12px; }
    .flex-item .btn-img { width: 42px; }
    .flex-item .nums { font-size: 15px; margin-top: 10px; }
}

@media (max-width: 720px) {
    .cards {
        gap: 6px;
    }
    .flex-item {
        padding: 16px 8px 20px;
        height: 108px;
        font-size: 11px;
    }
    .flex-item span {
        margin-left: 1px;
        margin-right: 2px;
    }
    .flex-item .account-img { width: 11px; }
    .flex-item .btn-img { width: 38px; }
    .flex-item .nums { font-size: 14px; margin-top: 8px; }
}

@media (max-width: 600px) {
    .cards {
        gap: 4px;
    }
    .flex-item {
        padding: 14px 6px 18px;
        height: 102px;
        font-size: 10px;
    }
    .flex-item span {
        margin-left: 1px;
        margin-right: 1px;
    }
    .flex-item .account-img { width: 10px; }
    .flex-item .btn-img { width: 34px; }
    .flex-item .nums { font-size: 13px; margin-top: 6px; }
}

/* 只有在极小屏幕时才允许换行 */
@media (max-width: 480px) {
    .cards {
        flex-wrap: wrap;
        gap: 8px;
    }
    .flex-item {
        flex-basis: calc(50% - 4px);
        padding: 12px 8px 16px;
        height: 96px;
        font-size: 10px;
    }
    .flex-item .account-img { width: 10px; }
    .flex-item .btn-img { width: 32px; }
    .flex-item .nums { font-size: 12px; margin-top: 6px; }
}

.flex-item2 {
     background: url("../../../assets/img/account/2.png") no-repeat center;
}
.flex-item3 { 
     background: url("../../../assets/img/account/3.png") no-repeat center;
}
.flex-item4 {
     background: url("../../../assets/img/account/4.png") no-repeat center;
}
.disableds {
    cursor: not-allowed !important;
}
</style>